<!DOCTYPE html>
<html>

<head>
    <style>
        .comcss {
            /* background-color: green; */
            width: 100px;
            height: 100px;
            margin-top: 10px;
            color: #ffffff;
            text-align: center;
            /* border: 10px solid red; */
        }

        .css1 {
            padding: 20px;
            border-image: url("./happy.png") 30;

        }

        .css2 {
            border: 30px solid;
            padding: 20px;
            border-image: url("./happy.png") 5px 50px ;

        }

        .css3 {
            border: 60px solid transparent;
            padding: 20px;
            border-image: url("./happy.png") 10 repeat;
        }

        .css4 {
            border: 30px solid transparent;
            padding: 20px;
            border-image: url("./happy.png") 30 inherit;
        }

    </style>
</head>

<body style="background-color: #909090;">

    <h1>border-radius 属性</h1>

    <div class="comcss">普通图形</div>
    <div class="comcss css1">无border图片</div>
    <div class="comcss css2">30px边框</div>
    <div class="comcss css3">60px边框</div>
    <div class="comcss css4">重复</div>




</body>

</html>